<template>
  <div class="container">
    <topTitle
      :titleText="titleText"
      :back="back"
      @gobackTriser="goBack"
    ></topTitle>
    <div class="mainCon">
      <div style="padding: 20px 24px">
        <div class="applyJoinT">
          <img src="../../../static/img/apply.png" alt />
          <div style="margin-left: 16px">
            <p>申请加入项目</p>
            <p>
              <span>{{ info.name }}</span
              >于<span>{{ info.applayDate }}</span
              >申请加入贵公司参建的<span>{{ info.projectName }}</span>
            </p>
          </div>
        </div>
      </div>
      <div class="spacing"></div>
      <div style="padding: 20px 24px 30px">
        <!-- <div class="secondaryTitle secondaryTitleTheme">
                    身份信息
                </div> -->
        <div class="secondaryTitle secondaryTitleTheme">基础信息</div>
        <div>
          <el-row>
            <el-col :span="24">
              <el-col :span="8" class="labelWidthSty detailInfoItemSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >人员姓名：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  IdentityInfo.name || '--'
                }}</span>
              </el-col>
              <el-col :span="8" class="labelWidthSty detailInfoItemSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >身份证号：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  IdentityInfo.idcard || '--'
                }}</span>
              </el-col>
              <el-col :span="8" class="labelWidthSty detailInfoItemSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >人员性别：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  IdentityInfo.sexValue || '--'
                }}</span>
              </el-col>
              <el-col :span="8" class="labelWidthSty detailInfoItemSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >出生日期：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  IdentityInfo.birthday || '--'
                }}</span>
              </el-col>
              <el-col :span="8" class="labelWidthSty detailInfoItemSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >人员民族：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  IdentityInfo.nationalityValue || '--'
                }}</span>
              </el-col>
              <el-col :span="8" class="labelWidthSty detailInfoItemSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >家庭地址：</span
                >
                <span
                  class="gridContent contentSty color666 fontSizeF rowHeight"
                  >{{ IdentityInfo.address || '--' }}</span
                >
              </el-col>
            </el-col>
          </el-row>
          <!-- <div class="separator"></div> -->
          <el-row style="text-align: center; margin-top: 120px">
            <el-col :span="24">
              <el-button
                class="commonBut saveBtn"
                type="primary"
                :loading="isSaveLoading"
                @click="agreeApply"
                v-show="isShowUpdate"
                >通过</el-button
              >
              <el-button
                class="commonBut rejectBtn"
                type="primary"
                id="saveAdd"
                :loading="isSaveAgainLoading"
                @click="reject"
                v-show="isShowUpdate"
                >驳回</el-button
              >
              <el-button class="commonBut" @click="goBack">返回</el-button>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <el-dialog
      title="驳回"
      :visible.sync="formVisibleReject"
      :close-on-click-modal="false"
      @close="closeDialog"
      custom-class="brand-dialog-min-width"
      width="420px"
      class="tipDialog"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <el-form
        :model="formDataReject"
        label-width="120px"
        :rules="formRulesReject"
        ref="formDataReject"
      >
        <el-form-item label="驳回原因" class="row-padding-bottom" prop="reason">
          <el-input
            type="textarea"
            rows="3"
            placeholder="请输入驳回原因，提交后将短信通知项目"
            v-model="formDataReject.reason"
            @blur="formDataReject.reason = changeValue($event)"
            maxlength="100"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="handleClose" class="cancel">取消</el-button>
        <el-button
          type="primary"
          @click.native="submitRejectSave"
          :loading="regectSubmit"
          v-sdc
          class="save"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import common from '../../kits/common'

export default {
  name: 'projectApplyDetail',

  data() {
    return {
      titleText: '',
      isSaveLoading: false,
      isSaveAgainLoading: false,
      info: {},
      rejectReason: '', //驳回原因
      id: '',
      employeeId: '',
      projectId: '',
      projectName: '',
      IdentityInfo: {}, //身份信息
      back: true,
      isShowUpdate: '',
      formVisibleReject: false, //驳回弹框
      formDataReject: {
        reason: '',
      },
      formRulesReject: {
        reason: [
          {
            required: true,
            message: '请输入驳回原因',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  created() {
    this.id = this.$route.query.id
    this.employeeId = this.$route.query.employeeId
    this.projectId = this.$route.query.projectId
    this.projectName = decodeURI(this.$route.query.projectName)
    this.getEmpInfo()
    this.getIdentityInfo()
    this.isShowUpdate =
      this.$store.state.buttonLimitsArr.indexOf('projectEmployeeApply:update') >
      -1
  },
  methods: {
    goBack() {
      this.$router.push('/home/employee/projectEmployeeApply')
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/employee/projectEmployeeApply',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    // 获取人员信息
    getEmpInfo() {
      this.axios({
        method: 'post',
        url: 'api-e/cs/application/expend/detail',
        data: {
          id: this.id,
        },
      })
        .then(
          (resp) => {
            if (!resp.data.hasError) {
              this.info = resp.data.result
              this.titleText = this.info.projectName
            } else {
              this.$message({
                type: 'error',
                message: '数据获取失败',
              })
            }
          },
          (res) => {}
        )
        .catch((error) => {})
    },
    // 获取身份信息
    getIdentityInfo() {
      this.axios({
        method: 'post',
        url: 'api-e/cs/build/expand/detail',
        data: {
          employeeId: this.employeeId,
        },
      })
        .then(
          (resp) => {
            if (!resp.data.hasError) {
              this.IdentityInfo = resp.data.result
            } else {
              this.$message({
                type: 'error',
                message: resp.data.errorMsg,
              })
            }
          },
          (res) => {}
        )
        .catch((error) => {})
    },
    // 驳回
    reject() {
      this.formVisibleReject = true
    },
    handleClose() {
      this.formVisibleReject = false
      this.$refs['formDataReject'].resetFields()
    },
    submitRejectSave() {
      this.sure('1')
    },
    // 确定
    sure(type) {
      var status
      if (type == '1') {
        status = 'REJECT'
      } else {
        status = 'UNCOMPLETED'
      }
      this.axios({
        method: 'post',
        url: 'api-e/cs/application/expend/edit',
        data: {
          status: status,
          reason: this.formDataReject.reason,
          id: this.id,
        },
      })
        .then(
          (resp) => {
            if (!resp.data.hasError) {
              if (type == '1') {
                this.handleClose()
                this.$router.push({
                  path: '/home/employee/projectEmployeeApply',
                })
                this.$store.commit('CHANGE_SLIDER_NAME', {
                  oldUrl: '/home/employee/projectEmployeeApply',
                  newUrl: this.$router.currentRoute.fullPath,
                })
              } else {
                this.$router.push({
                  path: '/home/employee/improvedEmployeeAddJz',
                  name: 'improvedEmployeeAddJz',
                  query: {
                    projectId: this.projectId,
                    employeeId: this.employeeId,
                    projectName: this.projectName,
                    detail: this.id,
                  },
                })
                this.$store.commit('CHANGE_SLIDER_NAME', {
                  oldUrl: '/home/employee/projectEmployeeApply',
                  newUrl: this.$router.currentRoute.fullPath,
                })
              }
              this.$message({
                type: 'success',
                message: type == '1' ? '驳回成功' : '申请通过',
              })
            } else {
              this.$message({
                type: 'error',
                message: resp.data.errorMsg,
              })
            }
          },
          (res) => {}
        )
        .catch((error) => {})
    },
    // 通过
    agreeApply() {
      this.$confirm('是否通过申请', '申请审核', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.sure('2')
        })
        .catch((action) => {
          // this.$message({
          //     type: 'info',
          //     message:"已取消"
          // })
        })
    },
  },
}
</script>

<style scoped lang="less">
.container {
  .mainCon {
    padding: 0 !important;
    padding-bottom: 24px !important;
    .applyJoinT {
      background: #f8f9fb;
      padding: 16px 24px;
      position: relative;
      // height: 74px;
      display: flex;
      justify-content: flex-start;
      img {
        width: 40px;
        height: 40px;
        margin-top: 6px;
      }
      p:nth-of-type(1) {
        font-size: 18px;
        color: #333333;
        font-weight: 500;
      }
      p:nth-of-type(2) {
        font-size: 14px;
        color: #333333;
        margin-top: 6px;
      }
    }
    .rejectBtn {
      background-color: #3e5265;
      border-color: #3e5265;
      color: #fff;
    }
    .rejectBtn:hover {
      background-color: #3e5265;
      border-color: #3e5265;
      color: #fff;
      opacity: 0.8;
    }
  }
}

/* 保存按钮 */
.rejectBtn {
  background-color: #3e5265;
  border-color: #3e5265;
  color: #fff;
}
.rejectBtn:hover {
  background-color: #3e5265;
  border-color: #3e5265;
  color: #fff;
  opacity: 0.8;
}
</style>
